'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { 
  PhoneIcon,
  EnvelopeIcon,
  MapPinIcon,
  ChevronLeftIcon,
  ChevronRightIcon
} from '@heroicons/react/24/outline';
import ImageModal from '@/components/ImageModal';

interface SiteConfig {
  title: string;
  subtitle?: string;
  description: string;
  contactInfo?: {
    address?: string;
    phone?: string;
    email?: string;
  };
}

interface ContactInfo {
  id: string;
  type: 'wechat_group' | 'wechat_official' | 'qq_group' | 'email' | 'phone' | 'address';
  title: string;
  description?: string;
  content: string;
  qrCode?: string;
  isVisible: boolean;
  order: number;
}

interface News {
  id: string;
  title: string;
  content: string;
  image?: string;
  images?: string[];
  publishDate: string;
  category: string;
  type?: 'text' | 'image' | 'gallery';
}

export default function HomePage() {
  const [config, setConfig] = useState<SiteConfig>({
    title: '机器人创新实验室',
    subtitle: 'Robotics Innovation Lab',
    description: '致力于机器人技术研发与创新，培养优秀的机器人工程师'
  });
  
  const [news, setNews] = useState<News[]>([]);
  const [contactMethods, setContactMethods] = useState<ContactInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [currentImageIndex, setCurrentImageIndex] = useState<{[key: string]: number}>({});
  const [autoPlayEnabled, setAutoPlayEnabled] = useState<{[key: string]: boolean}>({});
  const [modalOpen, setModalOpen] = useState(false);
  const [modalImages, setModalImages] = useState<string[]>([]);
  const [modalCurrentIndex, setModalCurrentIndex] = useState(0);
  const [modalTitle, setModalTitle] = useState('');
  const [themeColors, setThemeColors] = useState({
    primary: '#3b82f6',
    secondary: '#64748b',
    background: '#ffffff'
  });
  const [carouselConfig, setCarouselConfig] = useState({
    interval: 4000,
    transition: 'smooth',
    autoPlay: true,
    pauseOnHover: true
  });

  useEffect(() => {
    fetchData();
  }, []);

  // 自动轮播效果
  useEffect(() => {
    if (!carouselConfig.autoPlay) return;
    
    const interval = setInterval(() => {
      setCurrentImageIndex(prev => {
        const newState = { ...prev };
        news.forEach(item => {
          if (item.images && item.images.length > 1) {
            // 只有当该项目的自动播放没有被明确禁用时才更新
            const isAutoPlayEnabled = autoPlayEnabled[item.id] === undefined || autoPlayEnabled[item.id] === true;
            if (isAutoPlayEnabled) {
              const currentIndex = newState[item.id] || 0;
              newState[item.id] = (currentIndex + 1) % item.images.length;
            }
          }
        });
        return newState;
      });
    }, carouselConfig.interval);

    return () => clearInterval(interval);
  }, [news, autoPlayEnabled, carouselConfig.interval, carouselConfig.autoPlay]);

  const fetchData = async () => {
    try {
      setLoading(true);
      
      // 获取网站配置
      const configResponse = await fetch('/api/config');
      if (configResponse.ok) {
        const configData = await configResponse.json();
        if (configData.success) {
          setConfig(prev => ({ ...prev, ...configData.data }));
          // 设置主题颜色
          if (configData.data.theme) {
            setThemeColors({
              primary: configData.data.theme.primaryColor || '#3b82f6',
              secondary: configData.data.theme.secondaryColor || '#64748b',
              background: configData.data.theme.backgroundColor || '#ffffff'
            });
          }
          // 设置轮播配置
          if (configData.data.carousel) {
            setCarouselConfig({
              interval: configData.data.carousel.interval || 4000,
              transition: configData.data.carousel.transition || 'smooth',
              autoPlay: configData.data.carousel.autoPlay !== false,
              pauseOnHover: configData.data.carousel.pauseOnHover !== false
            });
          }
        }
      }
      
      // 获取新闻数据
      const newsResponse = await fetch('/api/news');
      if (newsResponse.ok) {
        const newsData = await newsResponse.json();
        if (newsData.success) {
          setNews(newsData.data);
          // 初始化轮播索引
          const initialIndexes: {[key: string]: number} = {};
          newsData.data.forEach((item: any) => {
            if (item.images && item.images.length > 0) {
              initialIndexes[item.id] = 0;
            }
          });
          setCurrentImageIndex(initialIndexes);
        }
      }
      
      // 获取联系方式数据
      const contactResponse = await fetch('/api/contact');
      if (contactResponse.ok) {
        const contactData = await contactResponse.json();
        if (contactData.success) {
          setContactMethods(contactData.data);
        }
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);
    }
  };

  const nextImage = (newsId: string, totalImages: number) => {
    // 暂停自动轮播
    setAutoPlayEnabled(prev => ({ ...prev, [newsId]: false }));
    setCurrentImageIndex(prev => ({
      ...prev,
      [newsId]: ((prev[newsId] || 0) + 1) % totalImages
    }));
    // 5秒后恢复自动轮播
    setTimeout(() => {
      setAutoPlayEnabled(prev => ({ ...prev, [newsId]: true }));
    }, 5000);
  };

  const prevImage = (newsId: string, totalImages: number) => {
    // 暂停自动轮播
    setAutoPlayEnabled(prev => ({ ...prev, [newsId]: false }));
    setCurrentImageIndex(prev => ({
      ...prev,
      [newsId]: ((prev[newsId] || 0) - 1 + totalImages) % totalImages
    }));
    // 5秒后恢复自动轮播
    setTimeout(() => {
      setAutoPlayEnabled(prev => ({ ...prev, [newsId]: true }));
    }, 5000);
  };

  const openImageModal = (images: string[], index: number, title: string) => {
    setModalImages(images);
    setModalCurrentIndex(index);
    setModalTitle(title);
    setModalOpen(true);
  };

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5
      }
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <div 
            className="animate-spin rounded-full h-12 w-12 border-b-2 mx-auto"
            style={{ borderBottomColor: themeColors.primary }}
          ></div>
          <p className="mt-4 text-gray-600">加载中...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header Section */}
      <section 
        className="relative text-white"
        style={{
          background: `linear-gradient(to bottom right, ${themeColors.primary}, #9333ea, #1e40af)`
        }}
      >
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="relative container mx-auto px-4 py-20">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center"
          >
            <h1 className="text-4xl lg:text-6xl font-bold mb-6">
              {config.title}
            </h1>
            {config.subtitle && (
              <p className="text-xl lg:text-2xl mb-8 opacity-90">
                {config.subtitle}
              </p>
            )}
            <p className="text-lg lg:text-xl mb-8 max-w-3xl mx-auto leading-relaxed">
              {config.description}
            </p>
          </motion.div>
        </div>
      </section>

      {/* News Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-12"
          >
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              最新动态
            </h2>
            <p className="text-xl text-gray-600">
              了解我们的最新进展和重要公告
            </p>
          </motion.div>

          {news.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-gray-500">暂无新闻内容</p>
            </div>
          ) : (
            <motion.div
              variants={containerVariants}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              className="flex flex-col md:flex-row gap-8"
            >
              {/* 左栏 - 奇数项 */}
              <div className="flex-1 space-y-8">
                {news.filter((_, index) => index % 2 === 0).map((item, index) => (
                  <motion.article
                    key={item.id}
                    variants={itemVariants}
                    className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"
                  >
                  <div className="p-8">
                    <div className="flex items-center justify-between mb-4">
                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
                        item.category === 'achievement' 
                          ? 'bg-yellow-100 text-yellow-800'
                          : item.category === 'recruitment'
                          ? 'bg-green-100 text-green-800'
                          : 'bg-blue-100 text-blue-800'
                      }`}>
                        {item.category === 'achievement' && '成就'}
                        {item.category === 'recruitment' && '招新'}
                        {item.category === 'event' && '活动'}
                        {item.category === 'announcement' && '公告'}
                        {item.category === 'news' && '新闻'}
                      </span>
                      <span className="text-sm text-gray-500">
                        {new Date(item.publishDate).toLocaleDateString('zh-CN')}
                      </span>
                    </div>
                    
                    <h3 className="text-2xl font-bold text-gray-900 mb-4">
                      {item.title}
                    </h3>
                    
                    {/* 图片轮播 */}
                    {item.images && item.images.length > 0 && (
                      <div className="relative mb-6">
                        <div 
                          className="relative bg-gray-200 rounded-lg overflow-hidden cursor-pointer group"
                          style={{ aspectRatio: '4/3' }}
                          onClick={() => openImageModal(item.images!, currentImageIndex[item.id] || 0, item.title)}
                          onMouseEnter={() => carouselConfig.pauseOnHover && setAutoPlayEnabled(prev => ({ ...prev, [item.id]: false }))}
                          onMouseLeave={() => carouselConfig.pauseOnHover && setAutoPlayEnabled(prev => ({ ...prev, [item.id]: true }))}
                        >
                          {carouselConfig.transition === 'smooth' ? (
                            // 平滑滚动轮播
                            <div className="relative w-full h-full overflow-hidden">
                              <div 
                                className="flex h-full"
                                style={{ 
                                  transform: `translateX(-${(currentImageIndex[item.id] || 0) * 100}%)`,
                                  transition: 'transform 0.7s ease-in-out'
                                }}
                              >
                                {/* Debug info */}
                                {process.env.NODE_ENV === 'development' && (
                                  <div className="absolute top-2 left-2 bg-black/50 text-white px-2 py-1 text-xs rounded z-20">
                                    {currentImageIndex[item.id] || 0}/{item.images.length - 1}
                                  </div>
                                )}
                                {item.images.map((imgSrc, imgIndex) => (
                                  <div 
                                    key={imgIndex} 
                                    className="relative w-full h-full flex-shrink-0"
                                  >
                                    <Image
                                      src={imgSrc}
                                      alt={`${item.title} - ${imgIndex + 1}`}
                                      fill
                                      className="object-cover"
                                    />
                                  </div>
                                ))}
                              </div>
                            </div>
                          ) : carouselConfig.transition === 'fade' ? (
                            // 淡入淡出效果
                            <>
                              {item.images.map((imgSrc, imgIndex) => (
                                <div key={imgIndex} 
                                     className={`absolute inset-0 transition-opacity duration-700 ${
                                       (currentImageIndex[item.id] || 0) === imgIndex ? 'opacity-100' : 'opacity-0'
                                     }`}>
                                  <Image
                                    src={imgSrc}
                                    alt={`${item.title} - ${imgIndex + 1}`}
                                    fill
                                    className="object-cover"
                                  />
                                </div>
                              ))}
                            </>
                          ) : (
                            // 默认滑动效果
                            <Image
                              src={item.images[currentImageIndex[item.id] || 0]}
                              alt={item.title}
                              fill
                              className="object-cover transition-all duration-500"
                            />
                          )}
                          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <span className="bg-black/80 text-white px-3 py-1 rounded-full text-sm">
                              点击查看大图
                            </span>
                          </div>
                        </div>
                        {item.images.length > 1 && (
                          <>
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                prevImage(item.id, item.images!.length);
                              }}
                              className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors z-10"
                            >
                              <ChevronLeftIcon className="w-5 h-5" />
                            </button>
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                nextImage(item.id, item.images!.length);
                              }}
                              className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors z-10"
                            >
                              <ChevronRightIcon className="w-5 h-5" />
                            </button>
                            <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10">
                              {item.images.map((_, imgIndex) => (
                                <button
                                  key={imgIndex}
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    // 暂停自动轮播
                                    setAutoPlayEnabled(prev => ({ ...prev, [item.id]: false }));
                                    setCurrentImageIndex(prev => ({
                                      ...prev,
                                      [item.id]: imgIndex
                                    }));
                                    // 5秒后恢复自动轮播
                                    setTimeout(() => {
                                      setAutoPlayEnabled(prev => ({ ...prev, [item.id]: true }));
                                    }, 5000);
                                  }}
                                  className={`w-2 h-2 rounded-full ${
                                    (currentImageIndex[item.id] || 0) === imgIndex
                                      ? 'bg-white'
                                      : 'bg-white/50'
                                  }`}
                                />
                              ))}
                            </div>
                          </>
                        )}
                      </div>
                    )}
                    
                    {/* 单张图片 */}
                    {item.image && (!item.images || item.images.length === 0) && (
                      <div 
                        className="relative mb-6 bg-gray-200 rounded-lg overflow-hidden cursor-pointer group"
                        style={{ aspectRatio: '4/3' }}
                        onClick={() => openImageModal([item.image!], 0, item.title)}
                      >
                        <Image
                          src={item.image}
                          alt={item.title}
                          fill
                          className="object-cover transition-transform group-hover:scale-105"
                        />
                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                          <span className="bg-black/80 text-white px-3 py-1 rounded-full text-sm">
                            点击查看大图
                          </span>
                        </div>
                      </div>
                    )}
                    
                    {/* 内容 */}
                    <div 
                      className="text-gray-700 leading-relaxed prose prose-lg max-w-none"
                      dangerouslySetInnerHTML={{ __html: item.content }}
                    />
                  </div>
                </motion.article>
                ))}
              </div>

              {/* 右栏 - 偶数项 */}
              <div className="flex-1 space-y-8">
                {news.filter((_, index) => index % 2 === 1).map((item, index) => (
                  <motion.article
                    key={item.id}
                    variants={itemVariants}
                    className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"
                  >
                    <div className="p-8">
                      <div className="flex items-center justify-between mb-4">
                        <span className={`px-3 py-1 rounded-full text-sm font-medium ${
                          item.category === 'achievement' 
                            ? 'bg-yellow-100 text-yellow-800'
                            : item.category === 'recruitment'
                            ? 'bg-green-100 text-green-800'
                            : 'bg-blue-100 text-blue-800'
                        }`}>
                          {item.category === 'achievement' && '成就'}
                          {item.category === 'recruitment' && '招新'}
                          {item.category === 'event' && '活动'}
                          {item.category === 'announcement' && '公告'}
                          {item.category === 'news' && '新闻'}
                        </span>
                        <span className="text-sm text-gray-500">
                          {new Date(item.publishDate).toLocaleDateString('zh-CN')}
                        </span>
                      </div>
                      
                      <h3 className="text-2xl font-bold text-gray-900 mb-4">
                        {item.title}
                      </h3>
                      
                      {/* 图片轮播 */}
                      {item.images && item.images.length > 0 && (
                        <div className="relative mb-6">
                          <div 
                            className="relative bg-gray-200 rounded-lg overflow-hidden cursor-pointer group"
                            style={{ aspectRatio: '4/3' }}
                            onClick={() => openImageModal(item.images!, currentImageIndex[item.id] || 0, item.title)}
                            onMouseEnter={() => carouselConfig.pauseOnHover && setAutoPlayEnabled(prev => ({ ...prev, [item.id]: false }))}
                            onMouseLeave={() => carouselConfig.pauseOnHover && setAutoPlayEnabled(prev => ({ ...prev, [item.id]: true }))}
                          >
                            {carouselConfig.transition === 'smooth' ? (
                              // 平滑滚动轮播
                              <div className="relative w-full h-full overflow-hidden">
                                <div 
                                  className="flex h-full"
                                  style={{ 
                                    transform: `translateX(-${(currentImageIndex[item.id] || 0) * 100}%)`,
                                    transition: 'transform 0.7s ease-in-out'
                                  }}
                                >
                                  {item.images.map((imgSrc, imgIndex) => (
                                    <div 
                                      key={imgIndex} 
                                      className="relative w-full h-full flex-shrink-0"
                                    >
                                      <Image
                                        src={imgSrc}
                                        alt={`${item.title} - ${imgIndex + 1}`}
                                        fill
                                        className="object-cover"
                                      />
                                    </div>
                                  ))}
                                </div>
                              </div>
                            ) : carouselConfig.transition === 'fade' ? (
                              // 淡入淡出效果
                              <>
                                {item.images.map((imgSrc, imgIndex) => (
                                  <div key={imgIndex} 
                                       className={`absolute inset-0 transition-opacity duration-700 ${
                                         (currentImageIndex[item.id] || 0) === imgIndex ? 'opacity-100' : 'opacity-0'
                                       }`}>
                                    <Image
                                      src={imgSrc}
                                      alt={`${item.title} - ${imgIndex + 1}`}
                                      fill
                                      className="object-cover"
                                    />
                                  </div>
                                ))}
                              </>
                            ) : (
                              // 默认滑动效果
                              <Image
                                src={item.images[currentImageIndex[item.id] || 0]}
                                alt={item.title}
                                fill
                                className="object-cover transition-all duration-500"
                              />
                            )}
                            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                              <span className="bg-black/80 text-white px-3 py-1 rounded-full text-sm">
                                点击查看大图
                              </span>
                            </div>
                          </div>
                          {item.images.length > 1 && (
                            <>
                              <button
                                onClick={(e) => {
                                  e.stopPropagation();
                                  prevImage(item.id, item.images!.length);
                                }}
                                className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors z-10"
                              >
                                <ChevronLeftIcon className="w-5 h-5" />
                              </button>
                              <button
                                onClick={(e) => {
                                  e.stopPropagation();
                                  nextImage(item.id, item.images!.length);
                                }}
                                className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors z-10"
                              >
                                <ChevronRightIcon className="w-5 h-5" />
                              </button>
                              <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10">
                                {item.images.map((_, imgIndex) => (
                                  <button
                                    key={imgIndex}
                                    onClick={(e) => {
                                      e.stopPropagation();
                                      // 暂停自动轮播
                                      setAutoPlayEnabled(prev => ({ ...prev, [item.id]: false }));
                                      setCurrentImageIndex(prev => ({
                                        ...prev,
                                        [item.id]: imgIndex
                                      }));
                                      // 5秒后恢复自动轮播
                                      setTimeout(() => {
                                        setAutoPlayEnabled(prev => ({ ...prev, [item.id]: true }));
                                      }, 5000);
                                    }}
                                    className={`w-2 h-2 rounded-full ${
                                      (currentImageIndex[item.id] || 0) === imgIndex
                                        ? 'bg-white'
                                        : 'bg-white/50'
                                    }`}
                                  />
                                ))}
                              </div>
                            </>
                          )}
                        </div>
                      )}
                      
                      {/* 单张图片 */}
                      {item.image && (!item.images || item.images.length === 0) && (
                        <div 
                          className="relative mb-6 bg-gray-200 rounded-lg overflow-hidden cursor-pointer group"
                          style={{ aspectRatio: '4/3' }}
                          onClick={() => openImageModal([item.image!], 0, item.title)}
                        >
                          <Image
                            src={item.image}
                            alt={item.title}
                            fill
                            className="object-cover transition-transform group-hover:scale-105"
                          />
                          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <span className="bg-black/80 text-white px-3 py-1 rounded-full text-sm">
                              点击查看大图
                            </span>
                          </div>
                        </div>
                      )}
                      
                      {/* 内容 */}
                      <div 
                        className="text-gray-700 leading-relaxed prose prose-lg max-w-none"
                        dangerouslySetInnerHTML={{ __html: item.content }}
                      />
                    </div>
                  </motion.article>
                ))}
              </div>
            </motion.div>
          )}
        </div>
      </section>

      {/* Contact Section */}
      {contactMethods.length > 0 && (
        <section className="py-16 bg-gray-100">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="text-center mb-12"
            >
              <h2 className="text-3xl font-bold text-gray-900 mb-4">
                联系我们
              </h2>
              <p className="text-xl text-gray-600">
                欢迎加入我们的社群，一起探索机器人技术
              </p>
            </motion.div>
            
            <motion.div
              variants={containerVariants}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"
            >
              {contactMethods.map((contact) => (
                <motion.div 
                  key={contact.id}
                  variants={itemVariants} 
                  className="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow"
                >
                  {/* 图标显示 */}
                  {contact.type === 'wechat_group' && (
                    <div className="w-12 h-12 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
                      <span className="text-2xl">💬</span>
                    </div>
                  )}
                  {contact.type === 'wechat_official' && (
                    <div className="w-12 h-12 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
                      <span className="text-2xl">📢</span>
                    </div>
                  )}
                  {contact.type === 'email' && (
                    <EnvelopeIcon className="w-12 h-12 mx-auto text-purple-600 mb-4" />
                  )}
                  {contact.type === 'address' && (
                    <MapPinIcon className="w-12 h-12 mx-auto text-blue-600 mb-4" />
                  )}
                  {contact.type === 'phone' && (
                    <PhoneIcon className="w-12 h-12 mx-auto text-green-600 mb-4" />
                  )}
                  
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
                    {contact.title}
                  </h3>
                  
                  {contact.description && (
                    <p className="text-sm text-gray-600 mb-4">
                      {contact.description}
                    </p>
                  )}
                  
                  {/* 二维码或文本内容 */}
                  {contact.qrCode ? (
                    <div className="flex flex-col items-center">
                      <div className="w-40 h-40 bg-gray-100 rounded-lg mb-3 flex items-center justify-center overflow-hidden">
                        <Image
                          src={contact.qrCode}
                          alt={contact.title}
                          width={160}
                          height={160}
                          className="object-cover rounded-lg"
                          onError={(e) => {
                            // 使用占位符图片
                            e.currentTarget.src = '';
                          }}
                        />
                      </div>
                      <p className="text-sm text-gray-700 font-medium">
                        {contact.content}
                      </p>
                    </div>
                  ) : (
                    <div className="p-3 bg-gray-50 rounded-lg">
                      <p className="text-gray-700 font-medium break-all">
                        {contact.content}
                      </p>
                    </div>
                  )}
                </motion.div>
              ))}
            </motion.div>
          </div>
        </section>
      )}

      {/* 图片弹窗 */}
      <ImageModal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        images={modalImages}
        currentIndex={modalCurrentIndex}
        onIndexChange={setModalCurrentIndex}
        title={modalTitle}
      />
    </div>
  );
}